<template>
<div class="array_area">
  <div v-for="(item,index) in data" class="array">
    <div v-if="typeof data[index] === 'object'" class="small_object">
      <is-object v-model:data="data[index]" @change="dealChange($event,index)"></is-object>
    </div>
    <div v-else-if="data[index]!=null">
      <deal-input v-model:data="data[index]" @change="dealChange($event,index)"></deal-input>
    </div>
  </div>
</div>
</template>

<script setup>
  import { ref,onMounted, watch } from 'vue'
  import IsObject from './IsObject.vue'
  import DealInput from './DealInput.vue'
  const props = defineProps({
    data: {
      type: [String, Object],
      required: true
    }
  })
  const emit = defineEmits(['update:modelValue','change'])
  let data = ref('')
  onMounted(() => {
    data.value = props.data
  })
  // watch(data, (newdata) => {
  //   console.log('isArray监听到变化：', newdata)
  //   emit('update:modelValue', newdata)
  // })
  const dealChange = (e,n) => {
    data.value[n] = e
    console.log('change isArray 监听到变化：', n,e)
    emit('change', data.value)

  }
</script>

<style lang="less" scoped>
  .array_area {
    display: flex;
    // width: 600px;
    // width: 100%;
    flex-wrap: wrap;
    flex: 1;
  }
  .array {
    // width: 150px;
    // margin: 3px;
    margin-right: 20px;
    :deep(.el-input__wrapper) {
      padding: 0;
    }
    // .visual_input {
      
    // }
  }
  .visual_label {
    color: #c9d4d4;
    display: inline-block;
    // padding-right:20px;
    width: 150px;
    font-size: 18px;
  }
  .small_object {
    background-color: burlywood !important;
    // width: 100px;
    margin-bottom: 5px;

  }
</style>
